<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册</title>
<link href="css/login/register.css" rel="stylesheet" type="text/css">
<style type="text/css">
.phone_tips, .code_tips, .pwd1_tips, .pwd2_tips {
	position: absolute;
	left: 400px;
	z-index: 2;
	width: 300px;
	height: 38px;
	line-height: 38px;
}

.phone_tips {
	top: 305px;
}

.code_tips {
	top: 360px;
}

.pwd1_tips {
	top: 418px;
}

.pwd2_tips {
	top: 485px;
}
</style>
<script src="js/jquery-3.2.1.js" type="text/javascript"></script>
<script type="text/javascript">
	var code = 0;
	var cd = 60;
	//获得验证码的方法
	function getCode() {
		//获得手机号码
		var phone = $("input[name=phone]").val();
		//获得已有用户
		var phonelist = $("#ulist").val();
		console.log(phonelist);
		var isUser = false;
		if(phonelist.indexOf(phone)>0){
			isUser = true;
		}
		//非空验证
		if (phone == "" || phone == null) {
			//提示错误信息
			$(".phone_tips > span").html("*手机号码不能为空！");
			$("input[name=phone]").focus();
			return;
		} else if(!isUser) {
			code = Math.floor(Math.random() * 8999 + 1000);
			alert("验证码已发送至您的手机！");
			//发送验证码
			 $.post("https://api.mysubmail.com/message/xsend.json", {
				vars : {
					"code" : code
				},
				appid : "17126",
				to : phone,
				project : "32x7m",
				signature : "1c8cf1a0ae5184fb744e237d62fc5ef9"
			}, function(data) {
				alert(data.status);
			}, "json");
			settime($("#getCodeBtn"));
		}else{
			alert("该用户已存在！");
		}
	}
	//短信发送间隔60秒
	function settime(obj) {
		if (cd == 0) {
			//冷却完毕
			obj.removeAttr("disabled");
			obj.val("获取手机动态码");
			obj.css("background-color", "#438bdd");
			cd = 60;
			return;
		} else {
			obj.attr("disabled", true);
			obj.css("background-color", "gray");
			obj.val(cd-- + "秒后重新获取");
		}
		//每秒一次
		setTimeout(function() {
			settime(obj)
		}, 1000)
	}
	$(
			function() {
				//注册按钮点击事件
				$(".register_btn").click(
						function() {
							//获得手机号，动态码，密码
							var phone = $("input[name=phone]").val();
							var codeUser = $("input[name=code]").val();
							var password1 = $("input[name=password1]").val();
							var password2 = $("input[name=password2]").val();
							var xingming = $("input[name=xingming]").val();
							//验证手机不能为空
							if (phone == null || phone == "") {
								//提示错误信息
								$(".phone_tips > span").html("*手机号码不能为空！");
								$("input[name=phone]").focus();
								return;
							}
							if (password1 == null || password1 == ""){
								$(".pwd1_tips > span").html("*密码不能为空！");
								$("input[name=pwd1]").focus();
							}else if(password2==null || password2 == ""){
								$(".pwd2_tips > span").html("*密码不能为空！");
								$("input[name=pwd2]").focus();
							}else if(password1 != password2){
								$(".pwd2_tips > span").html("密码不一样");
								$("input[name=pwd2]").focus();
							}else if(codeUser!=code){
								$(".code_tips > span").html("验证码错误！");
								$("input[name=code]").focus();
							}else if(xingming == null || xingming==""){
								$("input[name=xingming]").focus();
								$(".xingming_tips > span").html("姓名不能为空！");
							}else{
								$(".reg_form").submit();
							}
							
							
						})
			})
</script>
</head>
<body>
	<jsp:include page="../public/header.jsp">
		<jsp:param value="0" name="index" />
	</jsp:include>
	<div class="register_background">
		<div class="clear register_box">
			<div class="left register_form">
				<h3 class="register_til">注册新用户</h3>
				<form class="reg_form" action="/fuhe/register" method="post">
					<ul class="register_now">
						<li><input name="phone" type="text" class="mobile_icon"
							placeholder="请输入您的手机号码" /> <!-- 隐藏提示框 -->
							<div class="phone_tips">
								<span style="color: red"></span>
							</div></li>
						<li><input name="code" type="text" class="phone_code"
							placeholder="请输入动态码"> <input type="button"
							id="getCodeBtn" onclick="getCode()" class="get_code"
							value="获取手机动态码" />
							<div class="code_tips">
								<span style="color: red; display: none">*code_tips</span>
							</div></li>
						<li><input name="password1" type="password"
							class="password_icon" placeholder="请输入6-12位数字、字母、字符组合">
							<div class="pwd1_tips">
								<span style="color: red; display: none">pwd1_tips</span>
							</div></li>
						<li><input name="password2" type="password"
							class="password_icon" placeholder="请重复输入6-12位数字、字母、字符组合" />
							<div class="pwd2_tips">
								<span style="color: red; display: none">pwd2_tips</span>
							</div></li>
						<li>
							<input style="margin-bottom:10px;" name="xingming" type="text" class="phone_code" placeholder="请输入姓名" />
							<div class="xingming_tips">
								<span style="color: red; display: none">name_tips</span>
							</div>
						</li>
						<li>
							<div class="register_btn">注&nbsp;&nbsp;&nbsp;&nbsp;册</div>
						</li>
						<input type="hidden" id="ulist" value="${ulist}">
					</ul>
				</form>
			</div>
		</div>
	</div>
</body>
</html>